<template>
  <v-container fluid class="px-0 mt-1">
    <div class="d-flex justify-space-between">
      <span>热门排行榜</span>
      <v-btn
          icon
          small
          class="grey--text"
      >
        <v-icon>mdi-dots-horizontal</v-icon>
      </v-btn>
    </div>
    <v-divider/>
    <v-list dense>
      <v-list-item-group
          color="primary"
      >
        <v-list-item
            v-for="(recommendBlog, index) in recommendBlogs"
            :key="recommendBlog.id"
            class="pl-2"
        >
          <v-icon color="red" class="mr-2">mdi-numeric-{{ index + 1 }}-box</v-icon>
          <v-list-item-content>
            <v-list-item-title v-text="recommendBlog.text"></v-list-item-title>
          </v-list-item-content>
          <v-list-item-action>
            <span class="text-caption grey--text">{{ recommendBlog.read | readCount }}</span>
          </v-list-item-action>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-container>
</template>

<script>
export default {
  name: "RecommendBlog",
  data() {
    return {
      recommendBlogs: []
    }
  },
  created() {
    this.recommendBlogs = [

      {id: 1, text: '考前50分-四六级必考词汇预测', read: 483200},

      {id: 2, text: '魔导国东征记－世界守护突破（622～624）三更！•OVERLORD', read: 154641},

      {id: 3, text: 'FGO国服《妖精圆桌领域 阿瓦隆･勒･菲 星辰诞生之刻》2.6前篇主线概况攻略', read: 120005},

      {id: 4, text: '1999元的miniLED HDR1000显示器HKC PG271Q简评', read: 100058},

      {id: 5, text: '22年四六级翻译预测--共青团', read: 75645},

      {id: 6, text: '四六级翻译预测--冬奥会', read: 66545},

      {id: 7, text: '【兵装榜2】全面推荐泛用兵装，斩击实战检验后', read: 56546},

      {id: 8, text: '为了实现游戏里的二段跳，人类到底能多拼命？', read: 46546},

      {id: 9, text: '2022上半年四级真题--提案，给学校图书馆，学校医院，学生会', read: 25646},

      {id: 10, text: '关于2022年高考数学试题的一点点想法', read: 14656},

    ]
  }
}
</script>

<style scoped>

</style>
